
<script type="text/javascript">

$(function(){
	  
	  var jcrop_api,
		boundx,
		boundy,
		// Grab some information about the preview pane
		$preview = $('#preview-pane'),
		$pcnt = $('#preview-pane .preview-container'),
		$pimg = $('#preview-pane .preview-container img'),
		
		xsize = $pcnt.width();
	  
    $("#cropbox").Jcrop({
      //aspectRatio: 1,
      onChange: updatePreview,
		onSelect: updatePreview,
		bgOpacity: .6,
		setSelect: [ 35, 35, 395, 395 ]
    },function(){
		// Use the API to get the real image size
		var bounds = this.getBounds();
		boundx = bounds[0];
		boundy = bounds[1];
		// Store the API in the jcrop_api variable
		jcrop_api = this;
		
		// Move the preview into the jcrop container for css positioning
		$preview.appendTo(jcrop_api.ui.holder);
		
		jcrop_api.setOptions({minSize: [0, 0],maxSize: [0, 0]});
	    jcrop_api.focus();
	});
    
    function updatePreview(c)
    {
  	  if (parseInt(c.w) > 0) {
  		var ry = rx = xsize / c.w;
  		
  		$pcnt.height( xsize*c.h/c.w );
  		//var ry = ysize / c.h;
		
		$pimg.css({
			width: Math.round(rx * boundx) + 'px',
			height: Math.round(ry * boundy) + 'px',
			marginLeft: '-' + Math.round(rx * c.x) + 'px',
			marginTop: '-' + Math.round(ry * c.y) + 'px'
		});
  		}
  	  
      $("#x").val(c.x);
      $("#y").val(c.y);
      $("#w").val(c.w);
      $("#h").val(c.h);
    };
    
    
    
    	$('#ar_lock').change(function(e) {
			jcrop_api.setOptions(this.checked ? {
				aspectRatio: $('#ar_width').val()/$('#ar_height').val()
			} : {
				aspectRatio: 0
			});
			jcrop_api.focus();
		});
    	
	  $('#ar_width,#ar_height').on('blur keyup',function(){
		  $('#ar_lock').trigger('change');
	  })
	  
	  $('#size_lock').change(function(e) {
			jcrop_api.setOptions(this.checked ? {
				minSize: [$('#size_width').val(), $('#size_height').val()],
				maxSize: [$('#size_width').val(), $('#size_height').val()]
			} : {
				minSize: [0, 0],
				maxSize: [0, 0]
			});
			jcrop_api.focus();
		});
	  $('#size_width,#size_height').on('blur keyup',function(){
		  $('#size_lock').trigger('change');
	  })
});



function checkCoords(form)
{
	  $('#dw').val($('#cropbox').width());
	  $('#dh').val($('#cropbox').height());
	  
  if (parseInt($("#w").val())){
  	ajaxSubmitForm(form,function(request){
  		//alert(request.url);
  		showSuccessMessage('已保存成功');
  		publishController.close_dialog();
  		if(current_edit_img) {
  			var s=new Date();
  			var url = request.url+ '?_=' + parseInt(Math.random()*100000);
  			current_edit_img.src = url;
  			current_edit_img.setAttribute("_src",url);
  		}
  	});
  	return false;
  }
  alert("Please select a crop region then press submit.");
  return false;
};
</script>
<style type="text/css">
  #target {
    background-color: #ccc;
    width: 500px;
    height: 330px;
    font-size: 24px;
    display: block;
  }

.jcrop-holder #preview-pane{display:block;position:absolute;z-index:2000;top:0;right:-220px;padding:6px;border:1px rgba(0,0,0,.4) solid;border-radius:6px;background-color:white;box-shadow:1px 1px 5px 2px rgba(0, 0, 0, 0.2);}

#preview-pane .preview-container {
    overflow: hidden;
    width: 200px;
}
#cropbox{ max-width: 100%;}
.jcrop-holder img, img.jcrop-preview {
    max-width: none;
}
</style>
<p>提示：裁剪时会覆盖上传的原图。</p>
<div class="jc-demo-box clearfix">
	<div style="width:800px;margin:10px auto;" class="clearfix">
		<div style="display:inline-block;width:600px;" >
			<img src="{{$src}}" style="max-width:360px !important;width:360px;" id="cropbox" />
			<div id="preview-pane">
					<div class="preview-container">
						<img src="{{$src}}" class="jcrop-preview" alt="Preview">
					</div>
			</div>
		</div>
		<div style="float:right;width:150px;">
			<!-- This is the form that our event handler fills -->
			
			
			<form action="{{$this->Html->url('/uploadfiles/crop')}}" method="post" onsubmit="return checkCoords(this);">
			
				<div style="font-size:80%;">
					<div>
							<input type="checkbox" id="ar_lock">
							<label for="ar_lock">设置比例</label> 
							<input id="ar_width" value="1" style="width:20px;padding: 2px;"> : <input id="ar_height" value="1" style="width:20px;padding: 2px;">
					</div>
					<div>
							<input type="checkbox" name="size_lock" id="size_lock">
							<label for="size_lock">固定尺寸</label>
							<input id="size_width" name="size_width" value="320" style="width:30px;padding: 2px;"> * <input id="size_height" name="size_height" value="320" style="width:30px;padding: 2px;">
					</div>
				</div>
				
				<hr/>
				
				<?php $set_mark = false; ?>
				{{loop $user_setting $wx_id $variables}}
					{{if $variables['watermark_pos'] > 0}}
						<?php $set_mark = true; ?>
						<p> 
						<label>
							<input type="radio" class="watermark" name="watermark" value="{{$wx_id}}">
							{{if $variables['watermark']}}
								<img id="watermark-{{$wx_id}}" style="height:32px" src="{{$this->Html->url($variables['watermark'])}}">
							{{else}}
								<span id="watermark-text-{{$wx_id}}">{{$variables['watermark_text']}}</span>
							{{/if}}
							<input type="hidden" id="watermark-pos-{{$wx_id}}" value="{{$variables['watermark_pos']}}">
						</label>
						</p>
					{{/if}}
				{{/loop}}
				{{if $set_mark}}
				<p><label><input type="radio" checked="checked" class="watermark" name="watermark" value=""> 无水印</label></p>
				{{/if}}
				
				<a href="{{$this->Html->url('/wx_variables/setting')}}" target="_blank">设置水印</a>
				<hr>
				<input type="hidden" id="x" name="x" />
				<input type="hidden" id="y" name="y" />
				<input type="hidden" id="src" name="src" value="{{$src}}" />
				<input type="hidden" id="w" name="w" />
				<input type="hidden" id="h" name="h" />
				<input type="hidden" id="watermark-img" name="watermark_img" />
				<input type="hidden" id="watermark-text" name="watermark_text" />
				<input type="hidden" id="watermark-pos" name="watermark_pos" />
				<input type="hidden" id="dw" name="dw" />
				<input type="hidden" id="dh" name="dh" />
				
				<input type="submit" value="裁剪保存" class="btn btn-large btn-primary" />
			</form>
		</div>
		<div style="clear:both;"></div>
	</div>
		
<script>
$(function(){
	
	$('.watermark').click(function(){		
		if( this.value != '' ){
			var wx_id = this.value;
			$('#watermark-pos').val( $('#watermark-pos-'+wx_id).val() );
			$('#watermark-text').val( $('#watermark-text-'+wx_id).text() );
			$('#watermark-img').val( $('#watermark-'+wx_id).attr('src') );
		}
		else{
			$('#watermark-pos').val( 0 );
			$('#watermark-img').val('');
			$('#watermark-text').val('');
		}
	});
})
</script>
		
</div>